<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="登陆"
        left-arrow
      />
    </header>
    <div class="content">
      <van-image src="http://img3.imgtn.bdimg.com/it/u=1369217141,2439687616&fm=26&gp=0.jpg"/>

      <van-form @submit="onSubmit" @failed="onFailed" validate-trigger="onChange">
        <van-field
          v-model="username"
          name="username"
          clearable
          placeholder="请输入手机号"
          :rules="[{ validator: validatorUsername, required: true, message: '请输入正确手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          clearable
          placeholder="请输入注册密码"
          :rules="[{ validator: validatorPassword, required: true, message: '请输入注册密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block
          :type="usernameflag && passwordflag  ? 'info' : ''"
          :disabled="!usernameflag || !passwordflag ? true : false"
          native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Form, Field, Button, Image as VanImage, Toast } from 'vant'
import axios from 'axios'
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(VanImage)
Vue.use(Toast)
export default {
  data () {
    return {
      username: '', // 15140048819
      password: '',
      usernameflag: false,
      passwordflag: false,
      pattern: /^1[3456789]\d{9}$/
    }
  },
  methods: {
    validatorPassword () {
      if (this.password.length < 6) {
        this.passwordflag = false
        return false
      } else {
        this.passwordflag = true
        return true
      }
    },
    validatorUsername () {
      if (!(this.pattern.test(this.username))) {
        this.usernameflag = false
        return false
      } else {
        this.usernameflag = true
        return true
      }
    },
    onSubmit (values) {
      axios.post('http://nz1908.wudaxun.top/api/users/login', {
        tel: values.username,
        password: values.password
      }).then(res => {
        console.log(res.data)
        // const { code } = res.data
        const code = res.data.code
        console.log(code)
        switch (code) {
          case '10505':
            console.log('密码错误')
            Toast.fail('密码错误')
            break
          case '10808':
            console.log('该用户还未注册')
            Toast.fail('该用户还未注册')
            break
          case '10888':
            console.log('登陆成功')
            Toast.success('登陆成功')
            this.$router.go(-1) // 返回上一页
            // 保存登陆状态 本地存储 cookie webStorage（local / session） 状态管理器
            sessionStorage.setItem('loginstate', true)
            sessionStorage.setItem('userid', res.data.data.userid)
            break
        }
      })
    },
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
    }
  }
}
</script>

<style lang="scss" scoped>
// scoped 表明的这个样式只针对当前页面有效
.content {
  padding: 30px 20px;
  .van-image {
    text-align: center;
    width: 50%;
    margin: 30px 25%;
    img {
      display: block;
    }
  }
}
</style>
